<template>
    <div>
      <el-row>
        <el-col :span="16">
          <el-form :inline="true" :model="queryForm" class="demo-form-inline" style="text-align: left;">
            <el-form-item label="申请单编号">
              <el-input v-model="queryForm.prNum" placeholder="请输入申请单编号" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="项目名称">
              <el-input v-model="queryForm.pname" placeholder="请输入项目名称" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="申请人">
              <el-input v-model="queryForm.prName" placeholder="请输入申请人姓名" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getTableData(true)">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>       
  
        <div v-if="!managerShow" style="text-align: right;">
        <el-col :span="8">
          <el-button-group>
            <el-button type="primary"  @click="openDialog">新增</el-button>
            <el-button type="primary"  @click="getOne">编辑</el-button>
            <el-button type="primary"  @click="delPro">删除</el-button>
          </el-button-group>
        </el-col>
      </div>
        
      <div v-if="managerShow">
        <el-col :span="8" style="text-align: right;">
          <el-button-group>
            <el-button type="primary"  @click="openJudge">审批</el-button>
          </el-button-group>
        </el-col>
      </div>

      </el-row>

      <el-row>
        <el-col><h3 style="text-align: left;">更多查询</h3></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item label="申请时间">
                <el-date-picker v-model="queryForm.startDate" type="date" placeholder="选择开始日期"></el-date-picker>至
                <el-date-picker v-model="queryForm.endDate" type="date" placeholder="选择结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="当前节点">
              <div v-if="role == 0">
                <el-select placeholder="请选择节点" v-model="queryForm.status" clearable="true">
                  <el-option label="未提交" :value="0"></el-option>
                <el-option label="部门经理审核" :value = "1"></el-option>
                <el-option label="总经理审核" :value="2"></el-option>
                <el-option label="已完成" :value="3"></el-option>
              </el-select>
              </div>
              <div v-if="role != 0">
                <el-select placeholder="请选择节点" v-model="queryForm.status" clearable="true" disabled>
                <el-option label="未提交" :value="0"></el-option>
                <el-option label="部门经理审核" :value="1"></el-option>
                <el-option label="总经理审核" :value="2"></el-option>
                <el-option label="已完成" :value="3"></el-option>
              </el-select>
              </div>
              <!-- <el-select placeholder="请选择节点" v-model="queryForm.status" clearable="true"> -->
            </el-form-item>
            
            <el-form-item label="所属部门">
              <div v-if="role != 2">
              <el-select v-model="queryForm.deptno" placeholder="请选择所属部门" clearable="true" filterable disabled>
              <el-option v-for="dept in deptList" :label="dept.dname" :value="dept.deptno" :key="dept.deptno"></el-option>
              </el-select>
              </div>
              <div v-if="role == 2">
              <el-select v-model="queryForm.deptno" placeholder="请选择所属部门" clearable="true" filterable>
              <el-option v-for="dept in deptList" :label="dept.dname" :value="dept.deptno" :key="dept.deptno"></el-option>
              </el-select>
              </div>
            </el-form-item>
          
          </el-form>
        </el-col>  
      </el-row>
  
      <el-row>
        <el-col>
          <el-table
            ref="multipleTable"
            :data="proList"
            border
            stripe
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="申请单编号"
              align="center"
              width="120">
              <template slot-scope="scope">{{ scope.row.prNum}}</template>
            </el-table-column>
            <el-table-column
            
              label="项目名称"
              width="120">
              <template slot-scope="scope">{{ scope.row.pname}}</template>
            </el-table-column>
            <el-table-column
  
              label="所属部门"
              show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.dname}}</template>
            </el-table-column>
            <el-table-column
  
              label="申请人"
              show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.prName}}</template>
            </el-table-column>
            <el-table-column
          
              label="申请时间"
              show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.date}}</template>
            </el-table-column>
            <el-table-column          
          label="预算金额"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.money}}</template>
          </el-table-column>
          <el-table-column          
          label="建议采购金额"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.money}}</template>
          </el-table-column>
          <div v-if="false">
          <el-table-column          
          label="主键"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.prid}}</template>
          </el-table-column>
        </div>

        <!--  -->
          <div>
        <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
            <el-button @click="checkOne(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="openFlow(scope.row)">流程图</el-button>
        </template>
        </el-table-column>
      </div>
        <!--  -->

          </el-table>
  
          <el-pagination
            background
            @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 6, 10, 15]"
                :page-size="queryForm.limit"
                :current-page="queryForm.page" 
            layout="prev, pager, next,total, sizes,jumper"
            :total="total">
          </el-pagination>
  
        </el-col>
      </el-row>
  
  
      <!-- 采购详情子组件 -->
      <pro-info :isShow = "visible" :mod = "mod" :role = "role" :nowdeptno = "queryForm.deptno" :deptData = "deptList" :projectDate = "projectList" @closeDialog = "setIsShow" @proSave = "tableLoad" @proSub = "tLoad" :proInfo = "proForm"></pro-info>
       <!-- 流程图子组件 -->
      <process :flowShow = "flowShow" :theStatus = "theStatus"  @closeDialog = "setFlowShow"></process>
    </div>
  </template>
  
  <script>
   import proInfo from '@/components/proInfo.vue';
   import process from '@/components/process.vue';
   export default {
    name:"cgglemp",
     components:{
       proInfo,
       process
     },
    data(){
      return{
        proList:[],
        checkedProList:[],
        queryForm:{
          prid:0,
          prNum: '',
          pname: '',
          prName:'',
          startDate:'',
          endDate:'',
          status:'0',
          deptno:'',
          page:1,
          limit:5
        },
        deptList:[], //部门数据
        projectList:[],
        //分页相关
        total: 0,  //总条数
  
        //布尔变量，控制弹窗
        visible : false,
        flowShow : false,
        theStatus: 1,  
        //定义一个传参的表
        proForm:{},
        role:0,
        managerShow:false,
        mod:0,
      }
    },
    methods:{
      //val代表所有选中项数据，是一个数组
      //可以用在判断选中项数量
      handleSelectionChange(val){
        this.checkedProList = val
      },
      //获取表格数据
      getTableData(resetPage = true){
        console.log(this.queryForm)

        // const requestConfig = { timeout: 3000 };
         if(resetPage){
           this.queryForm.page = 1
         }

        // this.$http.post("/getPro",this.queryForm).then(res =>{
        //   this.$http.post("/getCount",this.queryForm).then(res =>{
        //   this.total = res.data
        // })
          this.$http.post("/getProNew",this.queryForm).then(res =>{
          this.total = res.data.total
          this.proList = res.data.records
          debugger
        })
      },
       getDeptList(){
         this.$http.get("/getDeptList").then(res =>{
           this.deptList = res.data
         })
       },
       //////////////////////////////////////////////////////////////////////
       getProjectList(){
        //根据实际登陆的员工部门号信息为准
        const deptno = this.queryForm.deptno || 0;
        this.$http.get("/getProjectList/" + deptno).then(res => {
          this.projectList = res.data
        })
       },
      queryEmp(){
        
      },
      handleSizeChange(val) {
        //每页显示条数变化，即limit变化
          console.log(`每页 ${val} 条`);
          this.queryForm.limit = val
          this.getTableData()
        },
        //当前页码变化，即page变化
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.queryForm.page = val
          this.getTableData(false)
        },
        openDialog(){
          this.mod = 0
          this.visible = true
        },
        openFlow(row){
          this.theStatus = row.status
          console.log(this.theStatus)
          this.flowShow = true
        },
        setIsShow(){
          //弹窗关闭
          this.mod = 0
          this.visible = false
          this.getTableData()
          this.tableLoad()
        },
        setFlowShow(){
          this.flowShow = false
        },
        tableLoad(msg){
          if(msg === 'success'){
            //关闭弹窗
            this.visible = false
            //提示信息并刷新表单
            this.$message.success("保存成功")
            this.queryForm.page = 1
            this.getTableData()
          }
        },
        tLoad(msg){
          if(msg === 'success'){
            //关闭弹窗
            this.visible = false
            //提示信息并刷新表单
            this.$message.success("操作成功")
            this.queryForm.page = 1
            this.getTableData()
          }
        },
        //审批功能
        openJudge(){
            //先判断用户的选中项是否为一个
            if(this.checkedProList.length == 0){
            this.$message.warning("请选择要审批的采购申请")
            return
          }
          if(this.checkedProList.length > 1){
            this.$message.warning("请选择一条数据")
            return
          }
          //获取选中数据的主键
          //不知道数据格式时可以加断点调试
          let prNum = this.checkedProList[0].prNum
          //得到主键后调用后台获取员工的详细信息
          //路径写法和后台接收的格式相对应
          
          this.$http.get('/getOne/' + prNum).then(res =>{
            this.proForm = res.data
            //打开弹窗
            this.mod = 0
            this.visible = true  
          })
        
        },
        //点击编辑按钮，根据主键获取一个员工信息
        getOne(){
          //先判断用户的选中项是否为一个
          if(this.checkedProList.length == 0){
            this.$message.warning("请选择要修改的员工信息")
            return
          }
          if(this.checkedProList.length > 1){
            this.$message.warning("请选择一条数据")
            return
          }
          if(this.checkedProList[0].status == 0){
          let prNum = this.checkedProList[0].prNum
          //得到主键后调用后台获取员工的详细信息
          //路径写法和后台接收的格式相对应
          this.$http.get('/getOne/' + prNum).then(res =>{
            this.proForm = res.data
            //打开弹窗
            this.visible = true  
          })
        } else{
          this.$message.error('无法编辑已提交的申请')
        }
        },
        checkOne(row){
          console.log(row)
          let prNum = row.prNum
          this.$http.get('/getOne/' + prNum).then(res =>{
            this.mod = 2
            this.proForm = res.data
            debugger
            //打开弹窗
            this.visible = true 
          })
        },
        delPro(){
          if(this.checkedProList.length == 0){
            this.$message.warning("请选择要删除的员工信息")
            return
          }
          //确认是否要删除
          this.$confirm('确定要删除选中的数据吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //then代表点击确定后的动作
            debugger
            let prids = []
            for(let pro of this.checkedProList){
              prids.push(pro.prid)
              /////////////////////////////////
               if(pro.status != 0){
                 this.$message.error('无法删除已提交的申请')
                 return
               }
            }
            //调用后台执行删除
            
            this.$http.post('/delPr',prids,{ headers: { 'Content-Type': 'application/json' } }).then(res =>{
              if(res.data === 'success'){
                this.$message.success('删除成功')
                this.queryForm.page = 1
                this.getTableData()
              } else{
                this.$message.error('删除失败')
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        },
        setRole(){
          this.role = parseInt(localStorage.getItem("roleid")) || 0
          if(this.role == 4){
            this.role = 0
          }
          
        }
    },

    //页面一进来就获取员工表和部门表参数
    created(){
      ///////////////////////////////////////////////////////
      this.setRole()
      this.queryForm.status = this.role
      let dto = parseInt(localStorage.getItem('deptno'))
      if(parseInt(localStorage.getItem('deptno')) == 0){
        dto = 1
      }
      this.queryForm.deptno = dto
      debugger
      
      //////////////////////////////////////////////////////
      this.queryForm.page = 1
      
      this.getTableData()
      this.getProjectList()
      this.getDeptList()
      if(this.role != 0){
        this.managerShow = true;
      }
    }   
  }
  </script>
  
  <style>
  
  </style>